import React, { useState ,useEffect} from "react"
import "./style.less"
import { SearchBar } from 'antd-mobile'
import { useNavigate ,useParams} from 'react-router-dom'
const SearchHeader = () => {
    const params=useParams()
    function backHandle() {
        window.history.back();
    }
    const [valueSeacrh, setvalueSeacrh] = useState('')
    useEffect(()=>{
        setvalueSeacrh(params.keywords)
    },[params.keywords])
    const navigate = useNavigate();
    function keyUpHandle(e) {
        if (valueSeacrh !=='') {
            navigate(`/search/${valueSeacrh}`)
        }
    }
    return (
        <div id="search-header" className="clear-fix">
            <span className="back-icon float-left" onClick={backHandle}>
                <i className="icon-fanhui iconfont"></i>
            </span>

            <SearchBar style={{
                '--border-radius': '10px',
                '--background': '#ffffff',
                '--height': '32px',
                '--padding-left': '12px',
            }} onBlur={keyUpHandle} value={valueSeacrh} onChange={(e) => { setvalueSeacrh(e) }} />

        </div>
    )
}

export default SearchHeader